<template>
  <div class="datepicker-root">
    <div class="showbox" @click="toggle" :class="{active: showWin}">
      <div class="text">{{date[0]}}至{{date[1]}}</div>
      <div class="down">&lt;</div>
    </div>
    <transition name="fade">
      <div class="win" v-show="showWin" @click="e=>e.stopPropagation()">
        <div class="head">
          <div class="headitem"  v-for="n in 2"
            :class="{active: panel == n}" 
            @click="panel = n, emitInit(n)">
            <div class="label">{{getLabelText(n)}}</div>
            <div class="data">{{getTimeText(n)}}</div>
          </div>
        </div>
        <div class="body">
          <component
            :is="type + 'PickerItem'"
            ref="com"
            v-for="n in 2"
            v-model="date[n - 1]"
            v-show="panel == n">
          </component>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import DatePickerItem from './DatePickerItem'
import TimePickerItem from './TimePickerItem'
import moment from 'moment'

let now = moment()
let nowTime = now.format('HH:mm:ss')
let nowTime0 = now.clone().add(-1, 'h').format('HH:mm:ss')
let nowDate = now.format('YYYY-MM-DD')
let nowDate0 = now.clone().add(-1, 'd').format('YYYY-MM-DD')

export default {
  name: 'date-picker',
  components: {DatePickerItem, TimePickerItem},
  props: ['type'],
  data(){
    let date = this.type == 'date' ?
      [nowDate0, nowDate] :
      [nowTime0, nowTime]
    return {
      showWin: false,
      panel: 1,
      date
    }
  },
  mounted(){
    addEventListener('click', this.close)
  },
  beforeDestroy(){
    removeEventListener('click', this.close)
  },
  methods: {
    getLabelText(n){
      return this.type == 'date' ?
        n == 1 ? '开始日期' : '结束日期' :
        n == 1 ? '开始时间' : '结束时间'
    },
    getTimeText(n){
      return this.type == 'date' ?
        moment(this.date[n - 1], 'YYYY-MM-DD').format("MM月DD日") :
        this.date[n - 1]
    },
    emitInit(n){
      requestAnimationFrame(()=>{
        this.$refs.com[n - 1].$emit('changePanel')
      })
    },
    close(){
      this.showWin = false
    },
    toggle(){
      this.showWin || requestAnimationFrame(() =>  {
        this.showWin = true
        this.emitInit(1)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.datepicker-root
  position relative

.showbox
  height 38px
  background rgba(0,0,0,.5)
  border 1px solid rgba(89,179,255,.35)
  box-sizing border-box
  display flex
  cursor pointer
  &:hover
  &.active
    border 1px solid rgba(89,179,255,.7)
    transition all .3s ease
    >.down
      color rgba(89,179,255,.8)
  >.text
    flex auto
    text-align center
    line-height @height
    font-size 12px
    letter-spacing 2px
    font-family consolas, 'Microsoft Yahei'
    white-space nowrap
  >.down
    width @height
    height @height
    line-height @height
    text-align center
    font-family consolas
    transform rotate(-90deg)
    color rgba(89,179,255,.5)

.win
  position absolute
  border 1px solid rgba(89,179,255,0.7)
  box-sizing border-box
  border-top 0
  z-index 10
  top 38px
  width 100%
  background black
  transition all .3s ease
  transform-origin 50% 0 0
  >.head
    height 56px
    border-bottom 1px solid #333333
    color #59b3ff
    font-size 12px
    display flex
    white-space nowrap

.headitem
  width 50%
  text-align center
  padding-top 8px
  cursor pointer
  font-size 12px
  transition all .3s ease
  position relative
  >.label
    box-sizing border-box
    transition all .3s ease
  >.data
    transition all .3s ease
    font-size 14px
    margin-top 3px
  &::after
    content ''
    position absolute
    height 2px
    background #59b3ff
    bottom -1px
    left 42px
    width 76px
    transition all .3s ease
    transform scaleX(0)
.headitem.active
  padding-top 18px
  cursor default
  >.label
    width 60%
    font-size 14px
    margin 0 auto
  >.data
    transform scale(.8)
    opacity 0
  &::after
    transform scaleX(1)

.fade-enter,
.fade-leave-active 
  opacity 0
  transform scaleY(.6)
</style>